{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>纯CSS实现轮播图(自动轮播)</title>
	<link rel="stylesheet" href="{% static 'article/css/reset.css' %}">
{#	<link rel="stylesheet" href="./css/autoMatic.css">#}
</head>

<body>
	<!-- 创建外部展示容器 -->
	<div class="banner-container">
		<!-- 创建图片存储容器 -->
		<div class="banner-img-container">
            {% for i in pictures %}
                <img src="{{ i }}" alt="">
			{% endfor %}
		</div>
	</div>
</body>

</html>
<style>


/* 自动轮播样式 */
.banner-container{
	width:1200px;
	height:400px;
	/* 轮播图居中 */
	margin:1rem auto;
	/* 隐藏超出展示容器的内容 */
	overflow: hidden;
	position: relative;
}

.banner-container .banner-img-container {
	width:6000px;
	height:400px;
	overflow: hidden;
	position: absolute;
	/* 开启弹性盒，让图片横向排列 */
	display: flex;
	animation: run 10s ease infinite;
}

.banner-container .banner-img-container img{
	width:1200px;
	height:100%;
    object-fit: cover;
}

/* 动画关键帧 */
@keyframes run {
    0%, 20% {
        transform: translateX(0);
    }
    33.33%, 53.33% {
        transform: translateX(-1200px);
    }
    66.66%, 86.66% {
        transform: translateX(-2400px);
    }
    100% {
        transform: translateX(0);
    }
}


</style>